<template>
  <div>
    <ConTitle :topTitle="topTitle"></ConTitle>
    <el-tabs type="border-card" v-model="activeName" @tab-click="changetabfn">
      <el-tab-pane label="所有设备" name="all"> </el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>

      <!-- 表单 -->
      <div>
        <el-form :model="query" ref="form" label-width="100px">
          <el-form-item label="在线状态">
            <el-select v-model="query.online" placeholder="全部">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in options"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="EUI">
            <el-input v-model="query.eui"></el-input>
          </el-form-item>
          <el-form-item label="绑定时间">
            <el-date-picker
              v-model="query.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="submitForm"
              size="small"
              >搜索</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-share"
              size="small"
              @click="clearfun"
              >清除条件</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-delete"
              size="small"
              @click="refreshfun"
              >刷新</el-button
            >
            <span> 搜索结果： {{ total }}</span>
          </el-form-item>
        </el-form>
      </div>
    </el-tabs>
    <template>
      <el-table :data="gatewayList" style="width: 100%">
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="eui" label="EUI"> </el-table-column>
        <el-table-column prop="name" label="设备名称"> </el-table-column>
        <el-table-column prop="mhz" label="频率（MHZ）"> </el-table-column>
        <el-table-column prop="address" label="在线状态">
          <template slot-scope="scope">
            {{ scope.row.online | typefn }}
          </template>
        </el-table-column>
        <el-table-column prop="country" label="国家"> </el-table-column>
        <el-table-column prop="agreement" label="组网协议类型">
        </el-table-column>
        <el-table-column prop="address" label="绑定时间">
          <template slot-scope="scope">
            {{ scope.row.bTime | formatime }}
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 
        size-change:改变每页条数的时候触发的时间
        current-change当前页发生变化时的事件
        total:数据总条数
        layout 翻页属性
     -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currPage"
      :page-sizes="[2, 4, 5, 10]"
      :page-size="query.pageSize"
      layout=" prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { $gatewayList } from "@/api";
import ConTitle from "@/components/ConTitle.vue";
import moment from "moment";

export default {
  name: "DeviceeGroup",
  components: {
    ConTitle,
  },
  data() {
    return {
      topTitle: {
        type: "设备", //非首页，显示上一级
        text: "网关列表",
        msg: "展示EUI、名称、状态等设备信息，可根据EUI、状态，和绑定时间等条件筛选具体的网关",
      },
      gatewayList: [],
      total: 0, //数据总条数
      query: {
        currPage: 1, //当前页数,
        pageSize: 5,
        eui: "",
        online: "all",
        date: [],
        agreement: "all",
      },
      activeName: "all",
      options: [
        { value: "all", label: "全部" },
        { value: true, label: "在线" },
        { value: false, label: "离线" },
      ],
    };
  },
  filters: {
    formatime(value) {
      return moment(value).format("YYYY-MM-DD");
    },
    typefn(value) {
      return value ? "在线" : "离线";
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    clearfun() {
      this.query = {
        pageSize: 5,
        eui: "",
        online: "all",
        date: [],
        agreement: "all",
      };
      this.getData();
    },
    changetabfn() {
      this.query.agreement = this.activeName;
      this.getData();
    },
    refreshfun() {
      this.$router.go(0);
    },
    getData() {
      var queryStr = { ...this.query };
      if (queryStr != "") {
        queryStr.date = this.dateStr;
      }
      $gatewayList(queryStr).then((res) => {
        this.gatewayList = res.data;
        this.total = res.total;
      });
    },
    handleSizeChange(value) {
      this.query.pageSize = value;
      this.query.currPage = 1;
      this.getData();
      console.log("每页改变条数");
    },
    handleCurrentChange(page) {
      console.log("每页改变条数");
      this.query.currPage = page;
      this.getData();
    },
    submitForm() {
      this.getData();
    },
  },
  computed: {
    dateStr() {
      let [t1, t2] = this.query.date;
      let time1 = t1 && t1.getTime();
      let time2 = t2 && t2.getTime();
      if (time1 && time2) {
        return time1 + "-" + time2;
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 222px;
}
.el-table {
  margin-top: 20px;
}
.el-tabs {
  margin-top: 20px;
}

.el-pagination {
  background: white;
  text-align: center;
  height: 50px;
  line-height: 50px;
  padding-top: 20px;
}
</style>